<template>
  <!-- 模块1 -->
  <div class="modular">
    <div class="modular_top">
      <div class="triangle"></div>
      <div class="modular_icon">
        <img src="@/assets/img/jqtnh.png" alt="">
      </div>
      <h2>实时监测<span v-if="$store.state.building">东湖花园小区{{ $store.state.listData.infoS[0].buildNo < 10 ?
          (Array(2).join(0) + $store.state.listData.infoS[0].buildNo).slice(-2) :
          $store.state.listData.infoS[0].buildNo
      }}栋</span>
      </h2>
    </div>
    <div class="detection_cont">
      <div class="monitor_btns">
        <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
          <el-tab-pane label="水量" name="水量"></el-tab-pane>
          <el-tab-pane label="水压" name="水压"></el-tab-pane>
          <el-tab-pane label="水温" name="水温"></el-tab-pane>
          <el-tab-pane label="TDS" name="TDS"></el-tab-pane>
        </el-tabs>
      </div>
      <div class="detection_echarts"></div>
    </div>
  </div>
</template>
<script>
import * as api from '@/assets/utils/api.js'
export default {
  data() {
    return {
      arr: [],
      activeName: '水量',
      myChart: {},
      company: '[m³]',
      buildNo: '',
      number: 3
    }
  },
  mounted() {
    setTimeout(() => {
      this.getData()
      //根据窗口变化自动调节图表大小
      window.addEventListener('resize', () => {
        this.myChart.resize()
      })
    }, 2000)
  },
  methods: {
    changeBuildNo(id) {
      this.buildNo = id
      this.getData()
    },
    async getData() {
      const res = await api.realtimeData({ buildNo: this.buildNo, number: this.number })
      this.arr = res.data.slice(res.data.length - 7)
      this.initChart(this.arr)
    },
    handleClick() {
      if (this.activeName == '水量') {
        this.company = '[m³]'
        this.number = 3
      } else if (this.activeName == '水压') {
        this.company = '[Mpa]'
        this.number = 6
      } else if (this.activeName == '水温') {
        this.company = '[℃]'
        this.number = 7
      } else if (this.activeName == 'TDS') {
        this.company = '[PPM]'
        this.number = 8
      }
      this.getData()
    },
    initChart(arr) {
      let arr1 = [], arr2 = [], arr3 = [], date = []
      arr.forEach(item => {
        arr1.push(item.waterNum)
        arr2.push(item.waterNumDay)
        arr3.push(item.waterNumYear)
        date.push(item.time)
      })
      if(arr1 == []){
        arr2 = []
        arr3 = []
      }
      this.myChart = this.$echarts.init(document.querySelector('.detection_echarts'))
      this.myChart.setOption({
        color: ['#058cff', '#eed55f', '#50fde7'],
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: 'cross' // 默认为直线，可选为：'line' | 'shadow'
          },
          extraCssText: 'background: #023881;border:none;color:#fff;opacity: 0.9',
          formatter(params) {
            let res = []
            params.forEach((v)=>{
              res.push(`<span style="font-size: 0.12rem;">${v.seriesName}：<span style="color: #058cff">${v.value ? v.value : ''}</span></span>`)
            })
            return res.join('<br />')
          }
        },
        grid: {
          // height: '55%',
          bottom: '15%'
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: date,
          axisLabel: {
            show: true,
            textStyle: {
              color: '#50fde7'
            }
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: '#50fde7'
            }
          },
        },
        legend: {
          data: [this.activeName, '同期值', '上期值'],
          top: '4%',
          itemHeight: 8,
          itemWidth: 12,
          textStyle: {
            fontSize: '0.1rem',
            color: ['#058cff', '#eed55f', '#50fde7']
          }
        },
        yAxis: [
          {
            name: this.company,
            type: 'value',
            position: 'left',
            alignTicks: true,
            splitLine: {
              show: true,
              lineStyle: {
                type: 'dashed',
                color: '#5fa1ff',
                opacity: 0.3
              }
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: '#50fde7'
              }
            },
            axisLabel: {
              show: true,
              textStyle: {
                color: '#50fde7'
              }
            },
          }],
        series: [
          {
            name: this.activeName,
            data: arr1,
            showSymbol: false,
            type: 'line',
            areaStyle: {}
          },
          {
            name: '同期值',
            data: arr2,
            showSymbol: false,
            type: 'line',
            itemStyle: {
              normal: {
                lineStyle: {
                  width: 1,
                }
              }
            }
          },
          {
            name: '上期值',
            data: arr3,
            showSymbol: false,
            type: 'line',
            itemStyle: {
              normal: {
                lineStyle: {
                  width: 1,
                }
              }
            }
          }
        ]
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.detection_cont {
  padding-top: 0.5rem;

  .detection_echarts {
    width: 100%;
    height: 2rem;
  }
}
</style>
